<template>
	<view class="fillMax">
		<camera class="previewView" resolution="high" device-position="back" flash="off" frame-size="max" @error="error"></camera>
		<view class="takeTools">
			<view class="takePhoto" @click="takePhoto"></view>	
		</view>	
	</view>
</template>

<script>
	import { generateMask } from '@/common/utils/api.js';
	export default {
		data() {
			return {
				src: ''
			}
		},
		onLoad() {

		},
		methods: {	
			takePhoto() {
				// 获取摄像头对象
				const ctx = uni.createCameraContext();
				// 截获当下
				ctx.takePhoto({quality: 'high',
					success: (ctxRes) => {		
						console.log("taskPhoto")				
						generateMask(ctxRes.tempImagePath).then((uploadRes)=>{
							console.log(uploadRes)
							// uni.navigateTo({
							// 	url: '../editMask/editMask?src='+this.src
							// });
						})
					}
				});
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style>
	.fillMax {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.fillMax .previewView{
		flex: 12;
	}
	.fillMax .takeTools{
		flex: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
	}
	.fillMax .takeTools .takePhoto{
		display: flex;
		justify-content: center;
		align-items: center;
		aspect-ratio:1/1;
		height: 50%;
		border: 1.5px solid #ffffff;
		border-radius: 50%;
	}
	.fillMax .takeTools .takePhoto::after{
		display: block;
		content: '';
		aspect-ratio:1/1;
		height: 95%;
		background-color: #ffffff;
		border-radius: 50%;
	}
</style>